<template>
    <el-breadcrumb class="mc-breadcrumb" v-bind="$attrs">
      <el-breadcrumb-item v-for="(item,index) in list" :key="index">
        <span v-if="index==list.length-1" class="last-item">{{ item.label }}</span>
        <mc-link v-else class="mc-breadcrumb-item" @click="handlerClick(item)">{{ item.label }}</mc-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </template>
  
  <script>
  import mcLink from '@/components/mc-ui/link/mc-link.vue'
  /**
   * @group 单个组件的封装 mc-ui
   * 二次封装el-breadcrumb组件，基于原组件扩展，支持el-breadcrumb的原属性（el-breadcrumb-item的不支持）
   * 注意：此组件的表现样式为 a / b / c ，其中a,b是可点击的，最后面的c是不可点击的
   */
  export default {
    components: {
      mcLink
    },
    props: {
      /**
       * 节点列表
       * list子项包含:
       *    label: String, // 国际化文字
       * tips:默认最后一项不可点击
       */
      list: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      handlerClick (data) {
        // 点击时触发
        this.$emit('change', data)
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .mc-breadcrumb{
    .mc-breadcrumb-item{
      margin:0;
      vertical-align: top;
    }
  
    .last-item{
      color: #ccc;
      line-height: 16px;
    }
  
    ::v-deep .el-breadcrumb__separator {
      font-size: 18px;
      line-height: 16px;
    }
  }
  </style>
  <docs lang="md">
    面包屑导航

    # 用法
    ```jsx
   <template>
    <mc-breadcrumb :list="list"></mc-breadcrumb>
   </template>
   <script>
   export default{
    data(){
      return {
        list:[
          {
            label:'首页',
            url:'/'
          },
          {
            label:'列表页',
            url:'/list'
          },
          {
            label:'详情页'
          }
        ]
      }
    }
   }
   </script>
    ```
  </docs>
  